<template>
  <div class="detail">
     <header-com></header-com>
     <img :src="detailObj.pic" alt="">
     <p>{{detailObj.title}}</p>
     <el-button msg="主要按钮" type="success"></el-button>
     <div class="foot">
       <span>价格{{detailObj.price}}</span>
       <span style="background:red;color:#fff">立即购买</span>
     </div>
  </div>
</template>
<script>
// 驼峰命名的组件名字，在标签里面使用的时候要用“-”连接
import headerCom from '../components/headerCom.vue';
import elButton from '../components/elButton.vue'
export default {
  components:{
    headerCom,
    elButton
  },
  data(){
    return{
      detailObj:{}, // 这是详情页面信息
    }
  },
  created() {
    // this.detailObj = this.$route.query.obj;
    this.detailObj = this.$route.params.obj;
    // console.log(this.detailObj);
  },
  methods: {
     btnclick(val){
       console.log(val);
       console.log('我是子组件派发的');
     }
  },
}
</script>
<style lang="scss" scoped>
  img{
    width: 100%;
  }
  .detail{
    height: 100%;
  }
  p{
    text-align: center;
  }
  .foot{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    background: #ccc;
  }
  span{
    line-height: 50px;
    width: 50%;
    text-align: center;
  }
  
</style>
